<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .info-table td {
            padding: 10px;
            border: 1px solid #ddd;
            vertical-align: top;
        }
        .info-table td:nth-child(odd) {
            background-color: #f9f9f9;
            font-weight: bold;
        }
        .photo {
            width: 100px;
            height: auto;
        }
        .description {
            line-height: 1.6;
            color: #333;
        }
        .header span{
            margin-left:800px
        }
    </style>
</head>
<body>
    <div class="gl"></div>
    <script src="./jq.js"></script>
    <script>
        var id = sessionStorage.getItem('id')
        $.ajax({
        url: 'http://47.94.4.201/index.php/index/index/getteacherbyid?id=' + id,
        type: 'get',
        dataType: 'json',
        success: (a) => {
            console.log(a.data);
            $('.gl').html('')
            $('table').css('display', 'none')
                $('.gl').append(`<div class="container">
                        <div class="header">讲师信息<span onclick="gb()">x</span></div>
                        <table class="info-table">
                            <tr>
                                <td>姓名:</td>
                                <td>${a.data.name}</td>
                                <td>职务:</td>
                                <td>${a.data.teachertype ===1?"讲师":a.data.teachertype ===2?"班主任":"无"}</td>
                                <td rowspan="3">
                                    <img class="photo" src="https://via.placeholder.com/100" alt="讲师照片">
                                </td>
                            </tr>
                            <tr>
                                <td>花名:</td>
                                <td>${a.data.nick}</td>
                                <td>出生日期:</td>
                                <td>${a.data.birthdata}</td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td>${a.data.sex ===0?"男":a.data.sex ===1?"女":"无"}</td>
                                <td>入职日期:</td>
                                <td>${a.data.birthdata}</td>
                            </tr>
                            <tr>
                                <td>手机号:</td>
                                <td>${a.data.iphone}</td>
                                <td>邮箱:</td>
                                <td>liqingzhao@itcast.cn</td>
                            </tr>
                            <tr>
                                <td>籍贯:</td>
                                <td colspan="4">山东省 济南市 章丘市</td>
                            </tr>
                        </table>
                        <div class="description">
                            <p></p>
                            <p></p>
                        </div>
                    </div>`)
        },
        error: (e) => {
            console.log(e);
        }
    })
    function gb(){
        location.assign('./首页.html')
        sessionStorage.removeItem('id')
    }
    </script>
</body>
</html>